<template>
  <div class="box">
    <div class="header">
      <van-icon name="arrow-left" size="28" @click="$router.push('/home')" />

      <van-search shape="round" placeholder="请输入搜索关键词" @click="$router.push('/search')">
      </van-search>
      <van-icon name="ellipsis" size="34" />

    </div>
    <div class="main">
      <!-- 左边部分 -->
      <div class="left">
        <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
          <van-cell @click="shows">推荐产品</van-cell>
          <van-cell v-for="(item, index) in list" :key="index" @click="doShow(index)">{{ item }}</van-cell>
        </van-list>
      </div>
      <!-- 右边部分 -->
      <div class="right">
        <van-grid :gutter="10" :column-num="3">
          <van-grid-item v-for="(item, index) in brandlist" :key="index" icon="photo-o" @click="doShowLast(index)">{{
              item.brand
          }}</van-grid-item>
        </van-grid>

        <div class="top10">
          <van-list>
            <ul :class="isShow = 'prolist2'">
              <li class="van-hairline--bottom van-hairline--right" v-for="(item, index) in brandprolist" :key="index" @click="toJump(item.proid)">
                <img width="40%" :src="item.img1">
                <div>
                  <h4 class="van-multi-ellipsis--l2">{{ item.proname }}</h4>
                  <p>￥<span>{{ item.originprice }}</span></p>
                </div>
              </li>
            </ul>
          </van-list>
        </div>

        <div class="top10">
          <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoads">
            <!-- ----两套布局---- -->
            <ul :class="isShow = 'prolist2'">
              <li class="van-hairline--bottom van-hairline--right" v-for="(item, index) in recommendlist" :key="index">
                <img width="100%" :src="item.img1">
                <div>
                  <h4 class="van-multi-ellipsis--l2">{{ item.proname }}</h4>
                  <p>￥<span>{{ item.originprice }}</span></p>
                </div>
              </li>
            </ul>
          </van-list>
        </div>
      </div>
    </div>
  </div>
</template>


<script>
import { cateGoryList, brandList, brandProList, recommendList } from "../api/pro";

import Vue from 'vue';
import { NavBar, List, Grid, GridItem, Search, Icon } from 'vant';

Vue.use(NavBar);
Vue.use(List);
Vue.use(Grid);
Vue.use(GridItem);
Vue.use(Search);
Vue.use(Icon);

export default {
  name: 'Kind',
  components: {
  },

  data() {
    return {
      list: [],
      loading: false,
      finished: false,
      brandlist: [],
      brandprolist: [],
      recommendlist: [],
      count: 2,
    }
  },
  methods: {
    toJump(proid) {
      this.$router.push('/detail/' + proid)
    },
    onLoad() {
      // 异步更新数据 setTimeout 仅做示例，真实场景中一般为 ajax 请求
      setTimeout(() => {
        for (let i = 0; i < 10; i++) {
          this.list.push(this.list.length + 1);
        }
        // 加载状态结束
        this.loading = false;
        // 数据全部加载完成
        if (this.list.length >= 40) {
          this.finished = true;
        }
      }, 1000);
    },
    onLoads() {
      this.loading = true,
        setTimeout(() => {
          recommendList({ count: this.count, limiNum: 12 }).then((res) => {
            this.loading = false
            if (res.data.data.length == 0) {
              this.finished = true
            } else {
              this.recommendlist = [...this.recommendlist, ...res.data.data]
              this.count++
            }
          });
        }, 1000);
    },
    shows() {
      recommendList({ count: 1, limitNum: 12 }).then(res => {
        // console.log(res.data.data);
        this.recommendlist = res.data.data
      })
    },
    doShow(index) {
      // console.log(index);
      brandList({ category: this.list[index] }).then(res => {
        // console.log(res);
        this.brandlist = res.data.data
        // console.log(this.brandlist);
        this.brandprolist = ''
        this.recommendlist = ''
      })
    },

    doShowLast(index) {
      // console.log(this.list);
      // console.log(this.brandlist[index].brand);
      brandProList({ limitNum: 10, category: this.list, brand: this.brandlist[index].brand }).then(res => {
        // console.log(res);
        this.brandprolist = res.data.data
      })
    }
  },

  created() {
    cateGoryList().then(res => {
      // console.log(res);
      this.list = res.data.data
    })

    recommendList({ count: 1, limitNum: 12 }).then(res => {
      // console.log(res.data.data);
      this.recommendlist = res.data.data
    })

  },
}
</script>

<style scoped>
.header {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 0 10px;
}

.main {
  display: flex;
}

.left {
  width: 30%;
  overflow-y: auto;
}

.right {
  width: 68%;
  overflow-y: auto;
}

.top10 {
  margin-top: 0.1rem;
  min-height: 0.2rem;
  background-color: #fff;
}

.top10 ul li div h4 {
  font-weight: 400;
}

.top10 ul li div p {
  color: #ee0a24;
}

.top10 ul li div p span {
  font-size: 18px;
}

.prolist2 li div {
  padding-left: 10px;
}

.prolist2 li {
  display: flex;
}

.prolist2 li img {
  width: 30%;
  height: 0.8rem;
  border: 1px solid gray;
}

.prolist2 li div {
  flex: 1;
}
</style>